<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" 
	content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" 
	content="telephone=no,email=no,date=no,address=no">
<title>AUI快速完成布局</title>
<link rel="stylesheet" type="text/css" href="<%= request.getContextPath()%>/aui/public/css/aui.css"/>
<title>Insert title here</title>
</head>
<body>
 <section class="aui-grid aui-margin-b-15">
    <div class="aui-row">
        <div class="aui-col-xs-4">
            <div class="aui-badge">88</div>
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-grid-label">首页</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-gear"></i>
            <div class="aui-grid-label">设置</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-map"></i>
            <div class="aui-grid-label">地图</div>
        </div>
        <div class="aui-col-xs-4">
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-grid-label">日历</div>
        </div>
        <div class="aui-col-xs-4">
            <div class="aui-badge"></div>
            <i class="aui-iconfont aui-icon-date"></i>
            <div class="aui-grid-label">日期</div>
        </div>
        <div class="aui-col-xs-4">
            <div class="aui-dot"></div>
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-grid-label">购物车</div>
        </div>
    </div>
</section>
<section class="aui-grid">
    <div class="aui-row">
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-home"></i>
            <div class="aui-grid-label">首页</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-gear"></i>
            <div class="aui-grid-label">设置</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-map"></i>
            <div class="aui-grid-label">地图</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-calendar"></i>
            <div class="aui-grid-label">日历</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-date"></i>
            <div class="aui-grid-label">日期</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-cart"></i>
            <div class="aui-grid-label">购物车</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-paper"></i>
            <div class="aui-grid-label">发现</div>
        </div>
        <div class="aui-col-xs-3">
            <i class="aui-iconfont aui-icon-video"></i>
            <div class="aui-grid-label">视频</div>
        </div>
    </div>
</section>
</body>
</html>